import Btn from "components/items/button";
import tooltip from "components/items/tooltip";
import dynamicTag from "components/items/droppop";
import {cell, CellGroup, CellBlock, createStore, register, store} from 'components/form'

function removePhone(e) {
  const id = e.target.dataset.id
  const addPhoneInst = store.getById('phones')
  addPhoneInst.delete({id: id})
}

function addPhone(e) {
  const addPhoneInst = store.getById('phones')
  const allPhones = Object.keys(store.ctx.elements).filter(res => res.indexOf('phone-') > -1)
  for (let i = 1; i <= allPhones.length; i ++) {
    const yyy = store.getById('phone-'+i)
    yyy.attr('desc', <Btn onClick={removePhone} data-id={'phone-'+i} itemClass='btn-grey plain ml-small icon-jianhao square' />)
  }
  addPhoneInst.push({id: 'phone-'+(allPhones.length + 1), type: 'number', desc: <Btn onClick={addPhone} itemClass='btn-grey plain ml-small icon-jiahao square' />})
}

const Tooltip = tooltip({title: 'title', body: [{title: '你好，请问有什么可以帮到你'}]})
function onPopShow(e) {
  e.stopPropagation()
  Tooltip.showPop({dom: e.target})
}

function onPopHide(e) {
  Tooltip.hidePop(e)
}

store.showOtherInput = function(e, parmas) {
  const otherData = { id: 'other', placeholder: '请输入你的爱好', line: 'line' }
  this.setDesc(<cell.Text data={otherData} store={store} />)
  return true
}

//span
const itemSpan = {
  title: {title: '标题'},
  body: [{title: '欢迎你的到来，如有疑问，欢迎咨询。', itemClass: 'color-info'}],
  itemClass: 'ss-alert infox flex-1'
}

const tagSpan = dynamicTag({
  placeholder: '回车生成标签',
  type: 'pureTag',
  tagSpecial: true,
  autoCreateTag: true,
  readOnly: false,
  itemClass: 'wid-p100'
})

export const formData = [
  { title: "姓名", required: true, input: [{id: "input-1", value: "lgh", type: "text", desc: <UI_item itemClass='icon-question m-auto-lr-10' data-event='hover' onMouseEnter={onPopShow} onMouseLeave={onPopHide} />, short: '1', error: '请输入姓名'}] },
  { title: "联系电话", required: true, gid: 'phones', input: [{id: "phone-1", type: "number", desc: <Btn onClick={addPhone} itemClass='btn-grey plain ml-small icon-jiahao square' />, error: '请输入联系电话'}], itemClass: 'body-column'},
  { title: "密码", input: [{id: "input-3", placeholder: "***********", type: "password"}]},
  { title: "标签", input: [{id: "input-4", value: tagSpan, type: "span"}], itemClass: 'entity-flex'},
  // { title: "自定义", input: [{id: "input-5", value: itemSpan, spantype: 'item', type: "span"}], itemClass: 'entity-flex'},
  { title: "日期", input: [{id: "input-6", type: "date"}] },
  { title: "时间", input: [{id: "input-7", type: "time"}] },
  { title: "价位", input: [{id: "input-8", type: "range"}] },
  { title: "简述", input: [{id: "input-e-desc", type: "textarea", max: '20', multi: '1'}], itemClass: 'entity-flex'},
  { title: "描述", input: [{id: "input-desc", type: "textarea", max: '100'}], itemClass: 'entity-flex'},
  { title: '上传', input: [{ id: 'uploader-it', type: 'uploader', template: { type: 'img', className: 'xxx' } }] },
  {
    title: '性别',
    required: true,
    input: [{
      type: "radio",
      id: "sex-id",
      value: "2",
      itemClass: "checkbox",
      values: [
        ["1", { desc: "男"}],
        ["2", { desc: "女"}],
        ["3", { desc: "保密"}]
      ]
    }]
  },
  {
    title: '爱好',
    input: [{
      type: "checkbox",
      id: "hb-id",
      value: "2",
      itemClass: "checkbox",
      values: [
        ["1", { desc: "篮球"}],
        ["2", { desc: "唱歌"}],
        ["3", { desc: "敲代码"}],
        ["4", { desc: "其它", onChange: 'showOtherInput?idx=xxx' }],
      ],
      
    }]
  },
  {
    title: '城市',
    itemClass: 'item-row',
    input: [
      {
        type: "dd",
        id: "city-id",
        value: "1",
        readOnly: true,
        values: [
          ["1", { desc: "广东省"}],
          ["2", { desc: "广西省"}]
        ]
      },
      {
        type: "dd",
        id: "xx-id",
        value: "g1",
        readOnly: true,
        values: [
          ["g1", { desc: "广州市"}],
          ["g2", { desc: "汕尾市"}],
        ],
        union: [
          'city-id', 
          'onChange',
          function(param){
            const id = param.value[0]
            switch (id) {
              case '1':
                this.attr('value', 'g1')
                this.attr('values', [["g1", { desc: "广州市"}], ["g2", { desc: "汕尾市"}]])
                break;
              case '2':
                this.attr('value', 'gx1')
                this.attr('values', [["gx1", { desc: "南昌市"}]])
                break;
              default:
                break;
            }
          }
        ]
      },
      {
        type: "dd",
        id: "q-id",
        value: 'gz1',
        readOnly: true,
        values: [
          ["gz1", { desc: "天河区"}],
          ["gz2", { desc: "白云区"}],
          ["gz3", { desc: "越秀区"}]
        ],
        union: [
          [
            'city-id', 
            'onChange',
            function(param){
              const id = param.value[0]
              switch (id) {
                case '1':
                  this.attr('value', 'gz1')
                  this.attr('values', [["gz1", { desc: "天河区"}], ["gz2", { desc: "白云区"}], ["gz3", { desc: "越秀区"}]])
                  break;
                case '2':
                  this.attr('value', 'nc1')
                  this.attr('values', [["nc1", { desc: "东湖区"}], ["nc2", { desc: "西湖区"}]])
                  break;
                default:
                  break;
              }
            }
          ],
          [
            'xx-id', 
            'onChange',
            function(param){
              const id = param.value[0]
              switch (id) {
                case 'g1':
                  this.attr('value', 'gz1')
                  this.attr('values', [["gz1", { desc: "天河区"}], ["gz2", { desc: "白云区"}], ["gz3", { desc: "越秀区"}]])
                  break;
                case 'g2':
                  this.attr('value', 'sw1')
                  this.attr('values', [["sw1", { desc: "海丰"}], ["sw2", { desc: "陆丰"}]])
                  break;
                case 'gx1':
                  this.attr('value', 'nc1')
                  this.attr('values', [["nc1", { desc: "东湖区"}], ["nc2", { desc: "西湖区"}]])
                  break;
                default:
                  break;
              }
            }
          ]
        ]
      },
    ]
  },
  {
    title: ' ',
    itemClass: 'mt-default line-flex-no',
    input: [
      {
        id: 'btn',
        type: 'button',
        value: '下一步',
        onClick(e) {
          const requiredIds = ['input-1', 'phone-1']
          requiredIds.forEach(item => {
            const inst = store.getById(item)
            if (inst.attr('value') === '') {
              const error = inst.asset.properties.error
              inst.warn(error)
            }
          })
        }
      },
      {
        id: 'btn-keep',
        type: 'button',
        value: '保存',
        btnClass: 'btn-grey plain ml-default',
        onClick(e) {
          const requiredIds = ['input-1', 'phone-1']
          requiredIds.forEach(item => {
            const inst = store.getById(item)
            if (inst.attr('value') === '') {
              const error = inst.asset.properties.error
              inst.warn(error)
            }
          })
        }
      }
    ]
  }
]